<template>
  <div class="hai row height900">
    <div class="center">
      <div class="dunpai"></div>
      <div class="his1">
        <dir class="teacherleft"></dir>
        <div class="teacherright"></div>
      </div>
      <div class="his2">
        <dir class="boyleft"></dir>
        <div class="boyright"></div>
      </div>
      <div class="his3">
        <div class="girl-shadow"></div>
      </div>

      <div class="clock"></div>
      <div class="car"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "top1action"
};
</script>
<style scoped>
.center {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
@font-face {
  font-family: pmzdbt2;
  src: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/pmzdbt2.0.TTF");
}
.hai {
  /* background: #2f81f1; */
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/background.png");
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.height900 {
  height: 900px;
  min-width: 1200px;
}
.dunpai {
  position: absolute;
  height: 200px;
  width: 200px;
      left: -200px;
    top: 400px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/dunpai1.png");
  background-repeat: no-repeat;
  background-position: center;
  animation-name: dunpai1;
  animation-direction: alternate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes dunpai1 {
  0% {
    left: -200px;
  }
  100% {
    left: -230px;
  }
}

.his1 {
  position: absolute;
  height: 150px;
  width: 90px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/teacher.png");
  top: 660px;
  left: -82px;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
}

.his2 {
  position: absolute;
  height: 80px;
  width: 60px;
  top: 695px;
  left: 0px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/boy.png");
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  z-index: 8;
}

.boyleft {
  margin-top: 10px;
  height: 60px;
  flex: 1;
  background-image: url("http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/boy-right.png");
  background-repeat: no-repeat;
  background-position-x: center;
  animation-name: boyleft1;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  z-index: 1;
}

@keyframes boyleft1 {
  0% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}

.boyright {
  margin-top: 8px;
  margin-left: -15px;
  height: 60px;
  flex: 1;
  background-image: url("http://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/boy-left.png");
  background-repeat: no-repeat;
  background-position-x: 9px;
  animation-name: boyright;
  animation-direction: alternate-reverse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes boyright {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(45deg);
  }
}

@keyframes his11 {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.teacherleft {
  margin-top: 40px;
  height: 60px;
  flex: 1;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/teacher-left.png");
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: top;
  animation-name: teacherleft1;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes teacherleft1 {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.teacherright {
  margin-top: 49px;
  height: 40px;
  flex: 1;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/teacher-right.png");
  background-repeat: no-repeat;
  background-position-x: 9px;
  animation-name: his11;
  animation-direction: alternate-reverse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.his3 {
  position: absolute;
  height: 65px;
  width: 70px;
  top: 750px;
  left: 50px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/girl.png");
  background-repeat: no-repeat;
  background-position-y: top;
  background-position-x: center;
  animation-name: his13;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
}
@keyframes his13 {
  0% {
    height: 65px;
    top: 750px;
  }
  100% {
    height: 75px;
    top: 740px;
  }
}
.girl-shadow {
  height: 100%;
  width: 100%;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/girl-shadow.png");
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
}

.car {
  position: absolute;
  height: 180px;
  width: 260px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/car-1.png");
  background-repeat: no-repeat;
  animation-name: car1;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes car1 {
  0% {
    top: 530px;
    left: 400px;
  }

  100% {
    top: 640px;
    left: 300px;
  }
}

.clock {
  position: absolute;
  height: 200px;
  width: 200px;
  top: 468px;
  left: -270px;
  background-image: url("https://hterobot-kimage.oss-cn-qingdao.aliyuncs.com/images/active/camera.png");
  background-repeat: no-repeat;
  background-position: center;
  animation-name: clock1;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes clock1 {
  0% {
    top: 468px;
  }
  100% {
    top: 500px;
  }
}
</style>
